<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<head>
    <link rel="stylesheet" href="${contextPath}/static/webuploader-0.1.5/webuploader.css"/>
</head>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<div class="main-content">
    <div class="main-content-inner">
        <div class="breadcrumbs" id="breadcrumbs">
            <div class="col-md-8 col-xs-12">
                <%@include file="/WEB-INF/common/back/breadcrumb.jsp" %>
            </div>
        </div>

        <div class="page-content">
            <form id="addForm" class="form-horizontal" role="form">
                <div class="row">
                    <div class="col-xs-10 center">
                        <div id="pics">

                        </div>
                        <div id="upload_pic" style="background-color: white;">
                            <button type="button" class="btn btn-inverse btn-xs" style="width:500px;">
                                <i class="ace-icon fa fa-upload bigger-110"></i>
                                <label class="orange">上传图片</label>
                            </button>
                        </div>
                    </div>

                    <div class="col-xs-10 center">
                        <div id="videos">
                        </div>
                        <div id="upload_video" style="background-color: white">
                            <button type="button" class="btn btn-inverse btn-xs" style="width:500px;">
                                <i class="ace-icon fa fa-upload bigger-110"></i>
                                <label class="orange">上传视频</label>
                            </button>
                        </div>
                    </div>

                    <div class="col-xs-10 center">
                        <div id="docs">

                        </div>
                        <div id="upload_doc" style="background-color: white">
                            <button type="button" class="btn btn-inverse btn-xs" style="width:500px;">
                                <i class="ace-icon fa fa-upload bigger-110"></i>
                                <label class="orange">上传文档</label>
                            </button>
                        </div>
                    </div>
                </div>
                
            </form>
        </div>
    </div>
</div>

<%--文件上传组件--%>
<script src="${contextPath}/static/webuploader-0.1.5/webuploader.min.js"></script>
<script>
    var uploaderPic = "";
    var uploaderVideo = "";
    var uploaderDoc = "";
    $(function () {
        initUploader(uploaderPic, "pic");
        initUploader(uploaderVideo, "video");
        initUploader(uploaderDoc, "doc");
    });

    function initUploader(uploader, type) {
        var accept = {};
        if ("pic" == type) {
            accept = {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            };
        }
        if ("video" == type) {
            accept = {
                title: 'video',
                extensions: 'mp4,flv',
                mimeTypes: '.mp4'
            };
        }
        if ("doc" == type) {
            accept = {
                title: 'docs',
//                extensions: 'doc,pdf,txt',
//                mimeTypes: 'doc|pdf|txt'
            };
        }
        uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '${contextPath}/js/webuploader-0.1.5/Uploader.swf',
            // 文件接收服务端。
            server: '${contextPath}/file/upload',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: "#upload_" + type,
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 只允许选择图片文件。
            accept: accept
        });

        uploader.on('uploadSuccess', function (file, response) {
            if (G.isEmpty(response.data)) {
                layer.msg("上传失败");
                return;
            }
            var url = response.data.downloadUrl;
            var id = response.data.id;
            var fileName = response.data.fileName;
            var imgHtml = "";
            if ("pic" == type) {
                imgHtml = '<span id="' + id + '" class="btn btn-app btn-light no-hover no-radius" style="width: 152px;padding: 1px;">' +
                    '	<span class="line-height-1 bigger-170 blue">' +
                    '        <a href="javascript:void(0)" onclick="showImage(\'' + url + '\')">' +
                    '            <img width="150" height="150" alt="100x100" src="' + url + '">' +
                    '        </a>' +
                    '    </span>' +
                    '    <br>' +
                    '	<span class="line-height-1 smaller-90">' +
                    '        <a href="javascript:void(0)" onclick="delUpload(\'' + id + '\')">' +
                    '            <i class="ace-icon fa fa-times red"></i>' +
                    '        </a>' +
                    '        <input type="hidden" name="picIds" value="' + id + '">' +
                    '    </span>' +
                    '</span>';
            }
            if ("video" == type) {
                imgHtml = '<span id="' + id + '" class="btn btn-app btn-light no-hover no-radius" style="width: 152px;padding: 1px;">' +
                    '	<span class="line-height-1 bigger-170 blue">' +
                    '        <a href="javascript:void(0)" onclick="showImage(\'' + url + '\')">' +
                    '            <video width="150" height="150" controls="controls" src="' + url + '"></video>' +
                    '        </a>' +
                    '    </span>' +
                    '    <br>' +
                    '	<span class="line-height-1 smaller-90">' +
                    '        <a href="javascript:void(0)" onclick="delUpload(\'' + id + '\')">' +
                    '            <i class="ace-icon fa fa-times red"></i>' +
                    '        </a>' +
                    '        <input type="hidden" name="videoIds" value="' + id + '">' +
                    '    </span>' +
                    '</span>';
            }
            if ("doc" == type) {
                imgHtml = '<span id="' + id + '" class="btn btn-app btn-light no-radius" style="width:auto;padding: 1px;">' +
                    '	<span>' +
                    '        <a href="' + url + '" target="_blank" title="">' + fileName + '</a>' +
                    '    </span>' +
                    '    <br>' +
                    '	<span class="line-height-1 smaller-90">' +
                    '        <a href="javascript:void(0)" onclick="delUpload(\'' + id + '\')">' +
                    '            <i class="ace-icon fa fa-times red"></i>' +
                    '        </a>' +
                    '        <input type="hidden" name="fileIds" value="' + id + '">' +
                    '    </span>' +
                    '</span>';
            }
            $("#" + type + "s").append(imgHtml);
            //uploader.reset();
        });

        uploader.on('uploadError', function (file) {
            layer.msg("上传出错");
        });
    }

    function delUpload(id) {
        $("#" + id).remove();
    }
    
</script>